<template>
	<div id="edit-messenger-template">
		<el-form ref="form" :model="template" label-width="120px">
			<el-form-item label="平台">
				<el-select v-model="template.platform" placeholder="选择平台">
					<el-option label="juhe" value="juhe"></el-option>
					<el-option label="alidayu" value="alidayu"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="模板类型">
				<el-input v-model="template.messageType" readonly></el-input>
			</el-form-item>

			<el-form-item label="签名">
				<el-input v-model="template.sign"></el-input>
			</el-form-item>

			<el-form-item label="点检名称" v-if="template.id">
				<el-input v-model="template.point.name" readonly></el-input>
			</el-form-item>

			<el-form-item label="点检" v-if="template.id">
				<el-input v-model="template.point.point" readonly></el-input>
			</el-form-item>


			<!--If SMS-->
			<div v-if="template.messageType=='sms'">
				<el-form-item label="app_key" v-if="template.id">
					<el-input v-model="template.mData.app_key"></el-input>
				</el-form-item>
				<el-form-item label="app_secret" v-if="template.id">
					<el-input v-model="template.mData.app_secret"></el-input>
				</el-form-item>
				<el-form-item label="短信ID" v-if="template.id">
					<el-input v-model="template.template"></el-input>
				</el-form-item>
			</div>
			<div v-if="template.messageType='email'">
				<el-form-item label="模板">
					<TextEditor v-model="template.template" :editorToolbar="customToolbar"></TextEditor>
				</el-form-item>

			</div>
			<el-form-item label="是否可用">
				<el-switch v-model="enabled"></el-switch>
			</el-form-item>
			<el-form-item align="right">
				<el-button @click.native="cancel">取消</el-button>
				<el-button type="primary" @click.native="submit">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import TextEditor from '@/components/TextEditor'
  import errHandler from '@/assets/errHandler.js'
	export default {
		name:'edit-messenger-template',
		components:{
			TextEditor
		},
		data(){
			return {
				customToolbar: [['bold','italic','underline'],[{'list':'ordered'},{'list':'bullet'}],['image','code-block']],
				template:{
					template:'',
					isEnable:false,
				},
				enabled:false,
			}},
		methods:{
			submit(){
				this.$store.dispatch({
					type:'fetch',
					name:'updateTemplate',
					data:{
						id:this.id,
						cId:this.template.clientId,
						platform:this.template.platform,
						messageType:this.template.messageType,
						sign:this.template.sign,
						pointId:this.template.point.id,
						template:this.template.template,
						isEnable:this.enabled,
					}
				}).then(res=>{
					if(!res.errCode){
						this.$message({type:'success',message:'保存成功'});
						this.cancel();
					}else{
						this.$message({type:'error',message:res.erMsg});
					}
				}).catch(error=>{
					console.log(error);
					this.$message({type:'error',message:error.errMsg});
				})
			},
			cancel(){
				this.$router.push('/messenger-template-management');
			},
			requestTemplate(){
				this.$store.dispatch({
					type:'fetch',
					name:'getTemplate',
					data:{id:this.id}
				}).then(res=>{
					console.log(res);
					if(res.errCode){
						this.$message({
							message:res.errMsg,
							type: 'error'
						});
					}else{
						this.template = res;
						if(res.isEnable) this.enabled = true;
						else this.enabled = false;
					}
				}).catch(error=>{
					this.$message({
						message:'连不上服务器',
						type: 'error'
					});
				})
			},
		},
		computed:{
			id(){
				return this.$route.params.id;
			}
		},
		created(){
			this.requestTemplate();
		},
	}
</script>
